<template>
	<view class="isBFC">
		<view class="noticeBarWrap">
			<view class="left">{{config.title}}</view>
			<u-notice-bar :text="config.content" :bgColor="style.backGrRoudColor" :color="style.noticeColor" icon=""
				:fontSize="style.fontSize"></u-notice-bar>
		</view>
	</view>
</template>

<script setup>
	import { computed } from "vue";

	const props = defineProps({
		data: Object,
		imgHost: String,
	})
	const config = props.data;
	const style = computed(() => {
		let formatStyle = {};
		for (let key in config.style) {
			formatStyle[key] = config.style[key] + (typeof config.style[key] === 'number' ? 'px' : '');
		}
		return formatStyle;
	})
</script>

<style lang="scss">
	.noticeBarWrap {
		margin-top: v-bind('style.marginTop');
		margin-bottom: v-bind('style.marginbottom');
		margin-left: v-bind('style.marginLetRight');
		margin-right: v-bind('style.marginLetRight');
		display: flex;
		align-items: center;
		padding: 8px 0 8px 8px;
		background: v-bind('style.backGrRoudColor');
		border-radius: 4px;
		overflow: hidden;

		.left {
			padding-right: 5px;
			font-size: v-bind('style.fontSize');
			color: v-bind('style.titleColor');
			font-weight: 600;
		}

		::v-deep .u-notice-bar {
			padding: 0 !important;
		}
	}
</style>